<template><!--用户管理-->
  <div class="allBox">
    <div class="webPageTitle">用户权限设置</div>
    <div class="leftTitle">
      <div class="dataTitle">用户权限信息表</div>
      <div style="float: right;width: 180px" class="myFromBox">
        <Input v-model="queryUname"  placeholder="请输入相关账户名">
        <Button slot="append" icon="ios-search" @click="selectData(1)"></Button>
        </Input>
      </div>
      <div style="float: right;width: 180px" class="myFromBox">
        <Input v-model="queryId"  placeholder="请输入相关用户ID">
        <Button slot="append" icon="ios-search" @click="selectData(1)"></Button>
        </Input>
      </div>
      <div style="float: right;width: 180px" class="myFromBox">
        <Input v-model="queryMobile"  placeholder="请输入相关电话号码">
        <Button slot="append" icon="ios-search" @click="selectData(1)"></Button>
        </Input>
      </div>
      <div style="float: right;" class="myFromBox">
        <DatePicker  @on-clear="clearTime"  type="datetimerange"  format="yyyy年MM月dd日"  placement="bottom-end" placeholder="请选择日期" v-model="searchTime"  @on-ok="clickTime" style="width: 240px"></DatePicker>
      </div>
      <div style="float: right;" class="myFromBox">
        <Select v-model="queryRole"  style="width:150px"  @on-change="selectData(1)" placeholder="全部">
          <Option v-for="item in roleItem" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
    </div>
    <div style="float: left;width: 100%;">
      <Table highlight-row :loading="loading"  :columns="tableColumns" :data="tableData" ></Table>
    </div>

    <div  class="pageBox" >

      <!--用戶总数-->
      <template>
        <dive type="primary"  style="float: left;margin-left: 5.5%;font-size: large">注册用户总数：{{total}}</dive>
      </template>



      <!--修改用户手续费-->
      <template>
        <Modal
          v-model="updateWithDrawButtom"
          title="修改用户手续费"
          @on-ok="updateWithDraw"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">用户编号：</p>
          <Input v-model="withdrawData.userId" size="large" disabled></Input>
          <p style="margin-top: 10px;font-size: 14px">请选择手续费类型<span style="color: red;font-size: 12px;">（不能为空）</span>：</p>
          <template>
            <Select v-model="withdrawData.withdrawType" style="width:200px;margin-top: 10px;">
              <Option v-for="item in uChange" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </template>
          <p style="margin-top: 10px;font-size: 14px">手续费<span style="color: red;font-size: 12px;">（不能为空）</span>：</p>
          <Input v-model="withdrawData.withdrawRateValue"  placeholder="手续费" size='large'></Input>
        </Modal>
      </template>


      <!--修改用户类型-->
      <template>
        <Modal
          v-model="updateButtom"
          title="修改用户角色"
          @on-ok="updateData"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">用户编号：</p>
          <Input v-model="newData.userId" size="large" disabled></Input>
          <p style="margin-top: 10px;font-size: 14px">请选择用户角色<span style="color: red;font-size: 12px;">（不能为空）</span>：</p>
          <template>
            <Select v-model="typeId" style="width:200px;margin-top: 10px;">
              <Option v-for="item in uType" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </template>
        </Modal>
      </template>




      <!--修改用户状态-->
      <template>
        <Modal
          v-model="updateStatue"
          title="修改用户状态"
          @on-ok="updateFunStatus"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">用户ID：<span style="font-size: 20px">{{newStu.userId}}</span></p>
          <!--状态为 有效-->
          <div v-if="newStu.userStatus  == '有效'">
            <p style="margin-top: 10px;font-size: 14px">当前用户状态：<span style="color: green;font-size: 18px">{{newStu.userStatus}}</span></p>
            <p style="margin-top: 10px;font-size: 14px">修改后用户状态：<span  style="color: red;font-size: 18px">冻结</span></p>
          </div>
          <!--状态为 冻结-->
          <div v-else>
            <p style="margin-top: 10px;font-size: 14px">当前用户状态：<span style="color: red;font-size: 18px">{{newStu.userStatus}}</span></p>
            <p style="margin-top: 10px;font-size: 14px">修改后用户状态：<span  style="color: green;font-size: 18px">有效</span></p>
          </div>
          <p style="margin-top: 10px;font-size: 14px">点击确认进行修改！</p>
        </Modal>
      </template>
      <!--确认重置交易密码-->
      <Modal v-model="resetBut" width="360">
        <p slot="header" style="color:#f60;text-align:center">
          <Icon type="information-circled"></Icon>
          <span>重置交易密码</span>
        </p>
        <div style="text-align:center;font-size: 14px">
          <p>此用户码重置后将要重新登录！</p>
          <p>是否继续重置密码？</p>
        </div>
        <div slot="footer">
          <Button type="error" size="large" long   @click="resetPwd()">重置</Button>
        </div>
      </Modal>

      <!--读取API错误-->
      <template>
        <Modal v-model="redAPIModal" width="360">
          <p slot="header" style="color:#f60;text-align:left">
            <Icon type="information-circled"></Icon>
            <span>{{redAPIModalTit}}</span>
          </p>
          <div style="text-align:left">
            <p>错误信息：</p>
            <p>{{redAPIModalCen}}</p>
          </div>
          <div slot="footer">
            <Button type="error" size="large" long  @click="redAPIModalFun">确定</Button>
          </div>
        </Modal>
      </template>

        <Page :total="total" :page-size="rows" show-total @on-change="selectData" class="pageStyle"></Page>
    </div>
  </div>
</template>
<script>
  export  default {
    data(){
      return{
        optionTime:{
          disabledDate(date){
            return date  && date.valueOf() > Date.now() ;
          }
        },
        resetBut:false,
        updateStatue:false,
        updateButtom:false ,                                      //修改控制按钮
        updateWithDrawButtom:false,
        queryUname:'',
        queryMobile:'',
        queryLast:'',
        queryType:'',                                             //要查询的字段
        queryKey:'',
        queryId:'',
        queryRole:'',
        roleItem:[
          {
            value:'',
            label:'全部'
          },
          {
            value:'0',
            label:'系统用户',
          },
          {
            value:'1',
            label:'运营人员',
          },
          {
            value:'2',
            label:'席位商',
          },
          {
            value:'3',
            label:'财务人员',
          },
          {
            value:'4',
            label:'预留',
          },
          {
            value:'5',
            label:'普通用户',
          },
        ],
        tableColumns:[
          {title:'序号',type: 'index', width: 60, align: 'center'},
          {title:'用户ID',key:'userId',align: 'center'},
          {title:'账户名',key:'userName',align: 'center'},
          {title:'用户角色',key:'userType',align: 'center'},
          {title:'用户状态',key:'userStatus',align: 'center'},
          {title:'电话号码',key:'mobile',align:'center'},
          {title:'创建时间',key:'createTm',align:'center',width:140},
          {title:'手续费类型',key:'withdrawTypeString',align:'center'},
          {title:'手续费',key:'withdrawRateValue',align:'center'},
          {
            title: '操作',
            key: 'action',
            width: 300,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showupdate(params.row)
                    }
                  }
                }, '设置角色'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showWithDrawType(params.row)
                    }
                  }
                }, '设置手续费'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      /*this.showupdate(params.row)*/
                      this.showPopStatus(params.row);
                    }
                  }
                }, '修改状态'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      /*重置按钮*/
                      this.resetData = params.row;
                      this.resetBut=true;

                      //this.resetPwd(params.row.userName)
                    }
                  }
                }, '重置交易密码')
              ]);
            }
          }
        ],                                        //表构造
        tableData:[],                                            //数据
        /*分页*/
        status:'',                                                  //状态
        rows:10,                                                     //每页条数
        total:0,                                                  //总数量
        loading:true,                                              //表单数据加载时
        newStu:[],
        typeId:'',
        newData:[],
        resetData:'',
        uType:[
          {
            value:'0',
            label:'系统用户',
          },
          {
            value:'1',
            label:'运营人员',
          },
          {
            value:'2',
            label:'席位商',
          },
          {
            value:'3',
            label:'财务人员',
          },
          {
            value:'4',
            label:'预留',
          },
          {
            value:'5',
            label:'普通用户',
          },
        ],
        uChange:[
          {
            value:'1',
            label:'数量',
          },
          {
            value:'2',
            label:'费率',
          },
        ],
        aaa:'',
        redAPIModal:false,
        redAPIModalTit:'',
        redAPIModalCen:'',
        searchTime:'',
        withdrawData:[]
      }
    },
    methods:{

      showPopStatus:function (obj) {
        var _self = this;
        _self.updateStatue =  true;
        _self.newStu = obj
      },
      /*打开*/
      showupdate:function (obj) {
        var _self = this;
        _self.updateButtom=true;                                     //修改控制按钮
        _self.newData = obj
      },

      /*打开设置手续费*/
      showWithDrawType:function (obj) {
        var _self = this;
        _self.updateWithDrawButtom=true;                                     //修改控制按钮
        _self.withdrawData = obj;
        _self.withdrawData.withdrawType= obj.withdrawType.toString();
      },



      /*读取数据*/
      selectData: function (page) {
        this.aaa= page
        var _self = this;
        let start = this.searchTime[0]
        let end = this.searchTime[1]
        _self.$http.post(_self.service + '/user/pagelist',{
          page:page,
          rows:_self.rows,
          userName:_self.queryUname,
          startTime:start,
          endTime:end,
          userId:_self.queryId,
          userType:_self.queryRole,
          mobile:_self.queryMobile
        }).then(function (res) {
          if(res.data.code == '001'){
            var datas =  res.data.result.data;

            for(var i =0;i<datas.length;i++){
              if(datas[i].userType == 0){
                  datas[i].userType = '系统用户'
              }else if(datas[i].userType == 1){
                  datas[i].userType = '运营人员'
              }else if(datas[i].userType == 2){
                  datas[i].userType = '席位商'
              }else if(datas[i].userType == 3 ){
                  datas[i].userType = '账务人员'
              }else if(datas[i].userType == 4 ){
                datas[i].userType = '预留'
              }else if(datas[i].userType == 5){
                  datas[i].userType = '普通用户'
              }

              if(datas[i].userStatus == 0){
                datas[i].userStatus = '冻结'
              }else if(datas[i].userStatus == 1){
                datas[i].userStatus = '有效'
              }

              /**提币手续费类型  1数量 2费率**/

              if(datas[i].withdrawType == 1){
                datas[i].withdrawTypeString = '数量'
              }else {
                datas[i].withdrawTypeString = '费率'
              }



              let dataTm = new Date(datas[i].createTm)
              let time = _self.formatDate(dataTm,'yyyy-MM-dd hh:mm')
              datas[i].createTm =time;
            }
            _self.tableData = datas;
            _self.total = res.data.result.total;
            _self.loading = false;
          }else{
            _self.modalFun('用户权限信息错误',res.data.msg)
          }
        })

      },
      /*修改用户角色*/
      updateData: function () {
        var _self = this;
        if(this.typeId == ''){
          this.$Notice.warning({
            title: '请选择用户角色！',
          });
          return
        }
        _self.$http.post(_self.service + '/user/userType/update',{
            userType:_self.typeId,
            userId:_self.newData.userId
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("修改成功！");
            _self.selectData(_self.aaa);
          }else{
            _self.modalFun('修改用户角色错误',res.data.msg)
            _self.selectData(_self.aaa);
          }
        })

      },

      updateWithDraw: function () {
        var _self = this;
        if(this.withdrawData.withdrawType == ''){
          this.$Notice.warning({
            title: '请选择手续费类型！',
          });
          return
        }
        if(this.withdrawData.withdrawRateValue == ''){
          this.$Notice.warning({
            title: '请输入手续费！',
          });
          return
        }
        _self.$http.post(_self.service + '/user/userWithDraw/update',{
          withdrawType:_self.withdrawData.withdrawType,
          withdrawRateValue:_self.withdrawData.withdrawRateValue,
          userId:_self.withdrawData.userId
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("修改成功！");
            _self.selectData(_self.aaa);
          }else{
            _self.modalFun('修改手续费错误',res.data.msg)
            _self.selectData(_self.aaa);
          }
        })

      },



      /*修改用户当前状态*/
      updateFunStatus:function () {
        var _self = this;
        //1:有效    2:冻结
        if(_self.newStu.userStatus == '有效'){
          _self.newStu.userStatus =0
        }else if(_self.newStu.userStatus == '冻结'){
          _self.newStu.userStatus =1
        }
        _self.$http.post(_self.service +'/user/userstatus/update',{
          userStatus:_self.newStu.userStatus,
          userId:_self.newStu.userId
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("修改成功！");
            _self.selectData(_self.aaa);
          }else{
            _self.modalFun('修改用户当前状态错误',res.data.msg)
          }
        })


      },
      /*获取浏览器高度对 table的 row 显示进行数量控制 */
      tableRowH:function(){
        var _self = this;
        var winHeight = document.documentElement.clientHeight;
        _self.rows = Math.floor((winHeight - (40+50+50+100))/48)-1;
      },
      /*重置交易密码*/
      resetPwd:function () {
        var _self = this;
        var text = ''
        if((_self.resetData.mobile).trim() != ''){
          text = _self.resetData.mobile
        }else{
          text = _self.resetData.userName
        }
        _self.$http.post(_self.service + "/user/restinit/pwd",{
          userName:text
        }).then(function (res) {
            if(res.data.code == '001'){
              _self.$Notice.success({
                title:text + ",密码已重置!",
              });
              _self.selectData(_self.aaa)
              _self.resetBut=false;
            }else {
              _self.$Notice.error({
                title:_self.resetName+res.data.msg,
              });
              _self.resetBut=false;
            }
        })
      },
      /*Modal弹出层*/
      modalFun:function (modTit,modCen) {
        this.redAPIModal = true;
        this.redAPIModalTit = modTit;
        this.redAPIModalCen = modCen;
      },
      redAPIModalFun:function () {
        this.redAPIModal = false
      },
      /*获取选中日期*/
      clickTime:function () {
        for(var i in this.searchTime){
          let dataTm  = new Date(this.searchTime[i]);
          let time =  this.formatDate(dataTm,'yyyy-MM-dd hh:mm');
          var oldTime = (new Date(time)).getTime();
          this.searchTime[i] = oldTime
        }
        if(this.searchTime[0]  == this.searchTime[1]){
          this.searchTime[1] = this.searchTime[1]+86400000
        }else{
          this.searchTime[1] = this.searchTime[1] + (86400000-1)
        }
        this.selectData(1)
      },
      clearTime:function () {
          this.searchTime[0] = '';
          this.searchTime[1] = '';
          this.selectData(1)
      }

    },
    created:function(){
      // this.$http.defaults.headers.common['userId'] =this.cookie.getCookie('userId') ;
      // this.$http.defaults.headers.common['ticket'] = this.cookie.getCookie('ticket');
      this.tableRowH();
      this.selectData('1');
    }

  }
</script>
<style>
  .pageBox{
    float: left;
    width: 100%;
    margin-top: 10px
  }
  .pageStyle{
    float: right;
    margin-right: 20px;
    margin-bottom: 10px;
  }
</style>
